{"componentChunkName":"component---src-templates-blog-post-js","path":"/How-to-build-Instagram-in-React/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"8e0e4e1a-2e1a-555f-b492-5a53bfadfa00","excerpt":"Instagram has such a simple, yet elegant design, and on top of that it’s very modular. It’s almost like a puzzle because it has a lot of parts that can be…","html":"

Instagram has such a simple, yet elegant design, and on top of that it’s very modular. It’s almost like a puzzle because it has a lot of parts that can be reused throughout the app which makes it very interesting to build as a practice project. We are going to build Instagram in React and we are going to reuse as much of our code as we possibly can to make profile cards, story icons, posts and pretty much everything else that exists on Instagram’s home page.

\n

Once again, the whole project is a bit too lengthy to fit into a single blog post, but you can check out the video version with full instructions and explanations on Youtube:

\n
\n
\n
If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.\n

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.

","frontmatter":{"title":"How to build Instagram in React","series":null,"seriesLink":null,"date":"November 17, 2020","description":"Instagram has such a simple, yet elegant design, and on top of that it's very modular. It's almost like a puzzle because it has a lot of parts that can be reused throughout the app which makes it very interesting to build as a practice project. We are going to build Instagram in React and we are going to reuse as much of our code as we possibly can to make profile cards, story icons, posts and pretty much everything else that exists on Instagram's home page.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACIklEQVQoz1XRSU9TARiF4f4TF8aFcUXEhKRSqhBoi40XEBIWJoaC2DKWIlMKtKASOgFt6UB7O9wOdKBUKhQcEF0Yg1FiIJHEDSuX/obXihHj4tucxZNz8smiQoaIkManifGszsO03IHlpoundW7mapdYql8jqJEIaiUCQhx1dRvKGyrs2lWklhxRYf3iYi0ZZG6NyLxymUCHhO2BD/8jiXh/luzgFpvGbQrGEtmHRTxNUQyKUVyjXbwSrdh1M4h3MhXkH3YORirBmjrBhqnEbr7M3vI2RU+el+kdnoublEtlfMNhAo0pZrVmvKZ+DkIO8tNegs0p4m2Z/8GwkMJ+24/UXwksGSYepxkbimAaFzHonIyozJgUVlzKEOH2VWJDBkJGHaVJH8GGNKI2dQ5dTPZr43ReGybwRMRhS3JrJol6NoF6JESP4MRYNctgjYXYWI64K097QxOdNTW8KZQ52TklqysS0ab/NKygMvFuiu7qCbrkRgYa7BhUTtR1vfRoLNhVfvRVZmx9bt7v7+GLJFkwW1mcmefT0VfOfv7geP8b0b/g74aJ1jyj8nmEy32U9G7e3l/hkkKgvlHHRPUceqWFDTHG2a7EYT7Gh60UiWSOQnydF7lNvhydktNtVR70Z7osfW+DKcUizVe66ZX3YlZOoq+douO6ns6rAzjH1yh4XXxf93CSXOFzysthUeIg7MZhtfHx6JjXC+8IqRLEWjP8AkI+mbQThP0KAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/0e297124781de56c47db06278a84f787/0e6e2/instaBg.png","srcSet":"/static/0e297124781de56c47db06278a84f787/b460a/instaBg.png 480w,\n/static/0e297124781de56c47db06278a84f787/6e898/instaBg.png 960w,\n/static/0e297124781de56c47db06278a84f787/0e6e2/instaBg.png 1920w","srcWebp":"/static/0e297124781de56c47db06278a84f787/30cf3/instaBg.webp","srcSetWebp":"/static/0e297124781de56c47db06278a84f787/35871/instaBg.webp 480w,\n/static/0e297124781de56c47db06278a84f787/fcc10/instaBg.webp 960w,\n/static/0e297124781de56c47db06278a84f787/30cf3/instaBg.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/How-to-build-Instagram-in-React/","previous":{"excerpt":"A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows…","fields":{"slug":"/How-to-build-Netflix's-Coming-Soon-page-in-React/"},"frontmatter":{"date":"November 02, 2020","title":"How to build Netflix's Coming Soon page in React","series":null,"description":"A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows that are soon coming to Netflix. It has a few interesting functionalities. It's loading data from somewhere and sorting it into cards. You can bookmark a movie to let Netflix know you want to be notified when it comes out. It has a cool, modern looking share menu for which you need to manage state.","tags":["web","react"],"featuredImage":{"id":"59c8483f-d2af-5184-adf0-53d144e51701","publicURL":"/static/7a22096a1108d65c7262e5302662aef1/netflix.png","relativeDirectory":"How-to-build-Netflix's-Coming-Soon-page-in-React","relativePath":"How-to-build-Netflix's-Coming-Soon-page-in-React/netflix.png"}}},"next":{"excerpt":"A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education…","fields":{"slug":"/Build-Simple-Timeline-in-React/"},"frontmatter":{"date":"November 22, 2020","title":"Build Simple Timeline in React","series":null,"description":"A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education history, past projects, your blog posts and everything else that can be structured in a timeline. You can potentially build this on your own, or you can use one of the existing plugins which are very easy to setup and look pretty good out of the box. I will show you one of those plugins and an example of how you can generate all elements with some simulated data and you will have your own timeline in no time.","tags":["web","react"],"featuredImage":{"id":"8565fbb1-fa74-5acb-8341-fed7b1fa014f","publicURL":"/static/a929e3923f26a25007ff04dbf6fd2936/timeline.png","relativeDirectory":"Build-Simple-Timeline-in-React","relativePath":"Build-Simple-Timeline-in-React/timeline.png"}}}}}}